<template>
<div>
  <el-form  ref="dataSubjectForm" :rules="subjectRules" :model="subjectInfo"  label-width="100px">
        <el-form-item label="题目分类" prop="categoryId">
           <treeselect v-model="subjectInfo.categoryId" :options="cateOptions" :show-count="true" :clearable="false"
                       placeholder="请选择归属分类" :normalizer="normalizer"/>
        </el-form-item>
        <el-row  :gutter="15">
          <el-col :span="12" :xs="24">
            <el-form-item label="分值" prop="score">
              <el-input-number size="medium" v-model="subjectInfo.score" :min="1" placeholder="请填写分值" :step="1" :step-strictly="true"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="难度等级" prop="level">
              <el-rate v-model="subjectInfo.level" show-text :texts="texts" ></el-rate>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="参考答案" prop="answer">
            <el-radio-group v-model="subjectInfo.answer.answer">
              <el-radio v-for="(option) in options" :label="option.optionName" :key="option.optionName">{{ option.optionContent }}</el-radio>
            </el-radio-group>
          </el-form-item>
        <el-form-item label="题目名称"  prop="subjectName">
          <tinymce v-model="subjectInfo.subjectName"  :height="200" />
        </el-form-item>
        <el-form-item label="解析" prop="analysis">
          <tinymce v-model="subjectInfo.analysis"  :height="200" />
        </el-form-item>
        <el-form-item label="题目状态" prop="status">
          <el-radio-group v-model="subjectInfo.status">
            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
                      :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
</div> 
</template>

<script>
import tinymce from '@/components/tinymce'
import { getSimpleList } from "@/api/examination/subjectCategory";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: 'MultipleChoices',
  components: {
    tinymce,
    Treeselect
  },
  props: {
    subject: {
      type: Object,
      default: function () {
        return {
          id: '',
          examinationId: undefined,
          categoryId: undefined,
          subjectName: '',
          options: [
            { subjectChoicesId: '', optionName: 'A', optionContent: '正确' },
            { subjectChoicesId: '', optionName: 'B', optionContent: '错误' }
          ],
          answer: {
            subjectId: '',
            answer: '',
            answerType: '',
            score: ''
          },
          score: 5,
          analysis: '',
          level: 2
        }
      }
    },
    choices: {
      type: String,
      default: ''
    },
    //难度等级
    texts:{
      type:Array,
      default:function(){
        return  ['容易','偏易','适中','偏难','困难']
      }
    },
  },
  data () {
    return {
      cateOptions:[],
      subjectInfo: this.subject,
      choicesContent: this.choices,
      labelPosition: 'right',
      // 表单校验规则
      subjectRules: {
        subjectName: [{ required: true, message: '请输入题目名称', trigger: 'change' }],
        score: [{ required: true, message: '请输入题目分值', trigger: 'change' }],
        answer: [{ required: true, message: '请输入答案', trigger: 'change' }]
      },
      options: [],
      optionCollapseActives: ['1'],
      analysisCollapseActives: ['2'],
      multipleAnswers: []
    }
  },
  created() {
    this.getTreeselect();
  },
  methods: {
    
    /** 查询分类下拉树结构 */
    getTreeselect() {
      getSimpleList().then(response => {
        // 处理 deptOptions 参数
        for (let i = 0; i < response.data.length; i++) {
          response.data[i].id = parseInt(response.data[i].id); 
          response.data[i].parentId = parseInt(response.data[i].parentId);
        }
        this.cateOptions.push(...this.handleTree(response.data, "id"));
      });
    },
    // 格式化课程树的下拉框
    normalizer(node) {
      return {
        id: node.id,
        label: node.categoryName,
        children: node.children
      }
    },
    initDefaultOptions () {
      this.options = [
        { subjectChoicesId: '', optionName: 'A', optionContent: '正确' },
        { subjectChoicesId: '', optionName: 'B', optionContent: '错误' }
      ]
      this.subjectInfo.answer.answer = 'A'
      this.subjectInfo.options = this.options
    },
    setSubjectInfo (subject) {
      this.subjectInfo = subject
      this.initDefaultOptions()
    },
    getSubjectInfo () {
      return this.subjectInfo
    },
    // 表单校验
    validate () {
    console.log('validate')
      let valid = false
      this.$refs['dataSubjectForm'].validate((validate) => {
        valid = validate
      })
      return valid
    },
    clearValidate () {
    console.log('clearValidate')
      this.$refs['dataSubjectForm'].clearValidate()
    },
    resetTempSubject (serialNumber, score) {
      this.subjectInfo = {
        id: '',
        examinationId: undefined,
        categoryId: undefined,
        subjectName: '',
        type: 0,
        choicesType: 0,
        options: [
          { subjectChoicesId: '', optionName: 'A', optionContent: '正确' },
          { subjectChoicesId: '', optionName: 'B', optionContent: '错误' }
        ],
        answer: {
          subjectId: '',
          answer: '',
          answerType: '',
          score: ''
        },
        score: 5,
        analysis: '',
        level: 2
      }
      // 默认分数
      if (score.length!=0) {
        this.subjectInfo.score = score
      }
      this.initDefaultOptions()
      this.$refs['subjectNameEditor'].setContent('')
      this.$refs['analysisEditor'].setContent('')
    },
    initMultipleAnswers () {
      if ( this.subjectInfo.answer != '' && this.subjectInfo.answer > 0) {
        this.multipleAnswers = this.subjectInfo.answer.answer.split(',')
      }
    },
    getMultipleAnswers () {
      if (this.multipleAnswers.length > 0) {
        return this.multipleAnswers.join(',')
      }
      return ''
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover!important;
  display: inline-block;
}
</style>
